import { test, expect } from '@playwright/test';

class Form {
  constructor(page, locator) {
    this.page = page;
    this.locator = locator ? page.locator(locator) : page.locator('body');
  }
  async click() {
    await this.locator.click();
  }
}

// type=Select类型的表单项
export class Select extends Form {
  constructor(page, locator) {
    super(page, locator);
  }
  async setValue(label) {
    // 点击 select 打开选项
    await super.click();
    // 等待选项列表加载
    await this.page.waitForSelector('.el-select-dropdown__item:visible');
    // 等待下拉选项加载
    await this.page.waitForTimeout(500);
    // 选择匹配的选项
    // TODO:这里nth（0）不通用，以后调整
    await this.page.locator(`.el-select-dropdown__item:has-text("${label}"):visible`).nth(0).click();
  }
  async getValue() {
    // 获取 select 中当前选中的值
    const value = await this.locator.inputValue();
    console.log(value, 'getValue');
    return value.trim();
  }
}

// type=search类型的表单项
export class Search extends Form {
  constructor(page, locator) {
    super(page, locator);
  }
  async open(url, modalTitle, rowIndex = 0) {
    // 点击按钮，打开弹窗
    await super.click();
    // 等待接口响应
    await this.page.waitForResponse((res) => res.url().includes(url) && res.status() === 200);
    // 等待弹窗和表格加载
    await this.page.waitForTimeout(1000);
    // 双击选择弹窗中的指定行数据
    await this.page.locator(`[aria-label="${modalTitle}"] .el-table__body .el-table__row`).nth(rowIndex).dblclick();
  }
}

// type=datetime类型的表单项
export class DateTime extends Form {
  constructor(page, locator) {
    super(page, locator);
  }
  // 2024-06-24 00:00:00
  async setValue(date, time) {
    // 点击按钮，打开弹窗
    await super.click();
    // 输入时间
    await this.page.locator('.el-picker-panel__body-wrapper [placeholder="选择日期"]:visible').fill(date);
    // 设置时间
    await this.page.locator('.el-picker-panel__body-wrapper [placeholder="选择时间"]:visible').click();
    await this.page.locator('.el-picker-panel__body-wrapper [placeholder="选择时间"]:visible').fill(time);
    await this.page.locator('.el-time-panel__footer .confirm:visible').click();
    // 点击确认按钮
    await this.page.locator('.el-picker-panel__footer .el-button--default:visible').click();
    await this.page.waitForTimeout(1000);
  }
  async getValue() {
    const value = await this.locator.inputValue();
    return value.trim();
  }
  // 直接点击确定按钮
  async submit() {
    // 点击按钮，打开时间弹窗
    await super.click();
    await this.page.locator('.el-picker-panel__footer .el-button--default:visible').click();
    await this.page.waitForTimeout(1000);
  }
}

export class Time extends Form {
  constructor(page, locator) {
    super(page, locator);
  }
  //  18:20
  async setValue(time) {
    // 点击按钮，打开弹窗
    await super.click();
    // 设置时间
    let [hours, times] = time.split(':');
    let HOUR = await this.page.locator(`.el-time-panel__content .el-time-spinner__item:has-text("${hours}"):visible`).nth(0);
    await HOUR.scrollIntoViewIfNeeded();
    await HOUR.click();
    await this.page.waitForTimeout(1000);
    let TIME = await this.page.locator(`.el-time-panel__content .el-time-spinner__item:has-text("${times}"):visible`).nth(1);
    await TIME.scrollIntoViewIfNeeded();
    await TIME.click();
    // 点击确认按钮
    await this.page.locator('.el-time-panel__footer .confirm:visible').click();
    await this.page.waitForTimeout(1000);
  }
  async getValue() {
    const value = await this.locator.inputValue();
    return value.trim();
  }
  // 直接点击确定按钮
  async submit() {
    // 点击按钮，打开时间弹窗
    await super.click();
    await this.page.locator('.el-time-panel__footer .confirm:visible').click();
    await this.page.waitForTimeout(1000);
  }
}
